<template>
	<view>
		<view class="top-bar bg-pink">
			<view class="cu-bar search bg-pink">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="searchKeyword" :adjust-position="false" type="text" placeholder="搜索视频"
						confirm-type="search"></input>
				</view>
				<view class="action">
					<button @tap="searcVideo()" class="cu-btn bg-blue round">搜索</button>
				</view>
			</view>
		</view>

		<view class="content-top grid text-center col-2 ">
			<view class="cu-card case " v-for="(item,index) in vlist" :key="index" @tap="openVideo(item.aid,item.bvid)">
				<view class="cu-item shadow bg-blue" id="v-item">
					<view class="image ">
						<image class="v-pic" :src="item.pic" mode="aspectFit"></image>
						<view class="cu-bar bg-shadeBottom">
							<text class="text-cut">{{stPlay(item.play)}}</text>
							<text class="text-cut">{{item.length}}</text>
						</view>
					</view>

					<view class="cu-list margin-left-sm margin-top-sm">
						<view class="cu-item text-left text-Abc v-title">
							<text class="text-black text-lg ">{{item.title}}</text>
						</view>
						<view class="cu-item margin-bottom-sm text-left">
							<text class="text-grey iconfont ic_up">{{item.author}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		api
	} from '../../common/api.js';
	import {
		UID
	} from '../../common/helper.js'
	export default {
		data() {
			return {
				isRefresh: false,
				page: {
					pn: 3,
					ps: 26,
					count: 30659
				},
				vlist: [{
					"comment": 37,
					"typeid": 21,
					"play": 10020,
					"pic": "http://i0.hdslb.com/bfs/archive/648ccc86643960256b8fbf7e4130cbc727b5e179.jpg",
					"subtitle": "",
					"description": "https://weibo.com/tv/show/1034:4595185959501888?from=old_pc_videoshow",
					"copyright": "2",
					"title": "美女老师教你快速学习英语的音标",
					"review": 0,
					"author": "卧龙寺",
					"mid": 258457966,
					"created": 1611127093,
					"length": "115:12",
					"video_review": 51,
					"aid": 331180193,
					"bvid": "BV18A411H7Mh",
					"hide_click": false,
					"is_pay": 0,
					"is_union_video": 0,
					"is_steins_gate": 0,
					"is_live_playback": 0
				}, {
					"comment": 21,
					"typeid": 21,
					"play": 19052,
					"pic": "http://i1.hdslb.com/bfs/archive/207387977049c10981406d442a7c561c3b8296ae.jpg",
					"subtitle": "",
					"description": "https://weibo.com/tv/show/1034:4595405598687253?from=old_pc_videoshow",
					"copyright": "2",
					"title": "1036",
					"review": 0,
					"author": "卧龙寺",
					"mid": 258457966,
					"created": 1611127067,
					"length": "00:11",
					"video_review": 7,
					"aid": 671166312,
					"bvid": "BV1KU4y147LH",
					"hide_click": false,
					"is_pay": 0,
					"is_union_video": 0,
					"is_steins_gate": 0,
					"is_live_playback": 0
				}, {
					"comment": 9,
					"typeid": 21,
					"play": 6714,
					"pic": "http://i0.hdslb.com/bfs/archive/ae4aee6d6a2597b37516dc8dc5332e3d66968753.jpg",
					"subtitle": "",
					"description": "https://weibo.com/tv/show/1034:4595364854956043?from=old_pc_videoshow",
					"copyright": "2",
					"title": "配乐满分",
					"review": 0,
					"author": "卧龙寺",
					"mid": 258457966,
					"created": 1611126896,
					"length": "01:59",
					"video_review": 4,
					"aid": 756215325,
					"bvid": "BV1or4y1T7SQ",
					"hide_click": false,
					"is_pay": 0,
					"is_union_video": 0,
					"is_steins_gate": 0,
					"is_live_playback": 0
				}],
				index: 0,
				searchKeyword: ''
			}
		},
		onLoad() {
			let data = {
				mid: UID,
				pn: 1,
				ps: 26,
				index: 1,
				jsonp: 'jsonp'
			};
			uni.request({
				url: api.search,
				data: data,
				success: (res) => {
					console.log(res.data.data);
					this.page = res.data.data.page;
					this.vlist = res.data.data.list.vlist;
				}
			})
		},
		onReachBottom() {
			if (!this.isRefresh) {
				console.log("触发底部加载事件");
				this.getNextPage();
			}
		},
		methods: {
			getNextPage() {
				let data = {
					mid: UID,
					pn: this.page.pn + 1,
					ps: this.page.ps,
					index: 1,
					jsonp: 'jsonp'
				};
				this.isRefresh == true;
				uni.request({
					url: api.search,
					header: {},
					data: data,
					success: (res) => {
						console.log(res.data.data);

						this.isRefresh == false;
						this.page = res.data.data.page;
						this.vlist = this.vlist.concat(res.data.data.list.vlist);
					},
					fail: (res) => {
						this.isRefresh == false;
					}
				})
			},
			openVideo(aid, bvid) {
				uni.navigateTo({
					url: '../video/video?aid=' + aid + '&bvid=' + bvid
				})
			},
			stPlay(play) {
				if (play > 10000) {
					play = play / 10000;
					play = play.toFixed(1);
					return play + 'W';
				}
				return play;
			},
			searcVideo() {
				this.page.pn = 1
				let data = {
					mid: UID,
					pn: 1,
					ps: this.page.ps,
					tid: 0,
					keyword: this.searchKeyword
				};
				uni.request({
					url: api.search,
					header: {},
					data: data,
					success: (res) => {
						console.log(res.data.data);
						this.page = res.data.data.page;
						this.vlist = res.data.data.list.vlist;
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 100,
						});
					},
					fail: (res) => {

					}
				})
			}

		}
	}
</script>

<style>
	#v-item {
		margin: 10upx;
	}

	.v-pic {
		height: 200upx;
	}

	.v-title {
		height: 90upx;
		overflow: hidden;
	}

	.content-top {
		margin-top: 140upx;
	}
</style>
